<template>
	<view>
		<view class="search-input "><label class="iconfont icon-sousuo" /><input type="text" v-model="search" confirm-type="search"
			 class="font-size30" placeholder="搜索" /></view>
		<scroll-view class="content" scroll-y @scrolltolower="scrollButtonClick" id="height" :style="'height:' + height + 'px ;'">
			<view class="list" v-if="alreadyflowList.length">
				<view class="item" hover-class="uni-list-cell-hover" v-for="(item,index) in alreadyflowList" :key="index" @tap="alreadyflow(item)">
					<view class="item-head item-part">
						<view class="uni-item-left-name font-size30 color-3A3A3A">{{item.F_FullName}}<!-- <text class="marks" :class="item.FlowUrgent.statecs"> --></text></view>
						<view class="font-size24 color-9A9A9A">{{item.F_CreatorTime}}</view>
					</view>
					<view class="item-foot item-part">
						<view class="font-size24 color-9A9A9A">{{item.F_EnCode}}</view>
						<view class="font-size24 " :class="item.Status.statecss">{{item.Status.text}}</view>
					</view>
				</view>
			</view>
			<view class="noContent" v-else>
				<img :src="nodata" alt="">
				<view class="">
					暂无数据
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import helper from '@/common/js/helper.js'
	import config from '@/common/js/config.js'

	function flowStatus(value) {
		let state
		switch (value) {
			case 1:
				state = {
					text: '同意',
					statecss: 'text-success'
				}
				break;
			default:
				state = {
					text: '拒绝',
					statecss: 'text-danger'
				}
				break;
		}
		return state
	}

	function flowUrgentlook(value) {
		let state
		switch (value) {
			case 1:
				state = {
					urgstate: '普通',
					statecs: 'background-21B185'
				}
				break;
			case 2:
				state = {
					urgstate: '重要',
					statecs: 'background-FFAC05'
				}
				break;
			case 3:
				state = {
					urgstate: '紧急',
					statecs: 'background-FE5146'
				}
				break;
			default:
				state = {
					urgstate: '普通',
					statecs: 'background-21B185'
				}
				break;
		}
		return state
	}
	export default {
		data() {
			return {
				rows: 15,
				page: 1,
				total: 1,
				height: 0,
				search: '',
				alreadyflows: [],
				nodata: config.Resources.message.nodata,
				isNoData: false,
				thisStepId:''
			}
		},
		computed: {
			alreadyflowList: function() {
				let search = this.search;
				if (search) {
					return this.alreadyflows.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						});
					})
				}
				return this.alreadyflows;
			}
		},
		/* 点击返回按钮清除缓存 */
		onBackPress(e) {
			this.$helper.removeStorage();
		},
		// #ifdef MP
		onUnload(e) {
			this.$helper.removeStorage();
		},
		// #endif
		onShow() {
			this.alreadyflows.length = 0;
			this.init();
			this.$forceUpdate();
			this.isNoData = false;
		},
		onLoad() {
			uni.removeStorageSync('type')
			uni.removeStorageSync('thisStepId')
			uni.setStorageSync('type','alreadybacklog')
		},
		methods: {
			//页面初始化请求
			init() {
				let _this = this;
				helper.ajax({
					url: '/api/workflow/Engine/FlowBefore/List/2',
					data: {
						pageSize: _this.rows, //每页行数
						currentPage: 1, //当前页
					},
					success: res => {
						this.page = 1;
						let _total = Math.ceil(res.data.data.pagination.total/res.data.data.pagination.pageSize)
						this.total = _total;
						let _flows = res.data.data.list;
						this.isNoData = _flows.length > 0 ? false : true;
						this._flowsList(_flows)
					}
				});
			},
			
			//跳转详情
			alreadyflow(e) {
				uni.setStorageSync("thisStepId",e.thisStepId)
				uni.setStorageSync("type",e.type)
				/* 保存状态类型 */
				uni.setStorageSync("F_Status",e.F_Status)
				uni.setStorageSync("F_FullName",e.F_FullName);
				const _flowname = e.F_FlowCode.toLowerCase();
				let _url;
				let flowInfo = {
					disabled: true,
					operstate: 'info',
					id: e.F_ProcessId,
					status: e.F_Status,
					type: 'alreadybacklog',
					taskNodeId:this.thisStepId
				}
				if(e.F_FlowCode.indexOf('crmOrder') >= 0){
					_url = '/pages/apply/apply/ordermanagelist/formNew?id='+e.F_ProcessId+'&status='+e.F_Status
				}else{
					if(e.F_FormType==2){
						flowInfo.flowId = e.F_FlowId,
						flowInfo.initId = e.F_FlowId,
						_url = '/pages/work/flowchart/dynamic/form?flowInfo=' + JSON.stringify(flowInfo)
					}else{
						flowInfo.flowId = e.F_FlowId,
						_url = '/pages/work/flowchart/' + _flowname + '/' + 'form?flowInfo=' + JSON.stringify(flowInfo)
					}
				}
				this.$store.state.workflow.flowfromId = e.F_ProcessId;
				uni.navigateTo({
					url: _url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			
			//页面滚动
			scrollButtonClick() {
				let _this = this;
				if (_this.total > _this.page) {
					_this.page += 1;
					//触发求
					helper.ajax({
						url: '/api/workflow/FlowBefore/List/2',
						data: {
							pageSize: _this.rows, //每页行数
							currentPage: _this.page, //当前页
						},
						success: res => {
							let _total = Math.ceil(res.data.data.pagination.total/res.data.data.pagination.pageSize)
							this.total = _total;
							let _flows = res.data.data.list;
							this._flowsList(_flows)
						}
					});
				}
			},
			
			//保存页面字段
			_flowsList(_flows){
				for (let i = 0; i < _flows.length; i++) {
					this.alreadyflows.push({
						'F_Id': _flows[i].id,
						'F_FlowId': _flows[i].flowId,
						'F_FullName': _flows[i].fullName,
						'F_CreatorTime': helper.toDate(_flows[i].creatorTime, 'MM-dd'),
						'F_EnCode': _flows[i].enCode,
						'F_FlowForm': _flows[i].flowForm,
						'F_FlowCode': _flows[i].flowCode,
						'F_Status': _flows[i].status,
						'Status': flowStatus(_flows[i].status),
						'F_FormType': _flows[i].formType,
						'F_ProcessId': _flows[i].processId,
						'F_FlowUrgent': flowUrgentlook(_flows[i].flowUrgent),
						'FlowUrgent': flowUrgentlook(_flows[i].flowUrgent),
						'type' : 'alreadybacklog',
						'thisStepId' : _flows[i].thisStepId
					});
				}
			}
		},
		mounted() {
			let _this = this;
			// 获取设备宽度
			uni.getSystemInfo({
				success: function(res) {
					_this.height = res.windowHeight;
				}
			});
			if (this.alreadyflowList.length > 0) {
				let search = uni.createSelectorQuery().select(".search-input");
				search.boundingClientRect(data => {
					_this.rows = Math.ceil((_this.height - data.height) / 58)
				}).exec();
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
	}

	.uni-item-left-name {
		position: relative;
		/* float: left; */
		width: fit-content;
	}

	.search-input {
		background-color: #FFFFFF;
	}

	.cell-navigate::after {
		left: 0;
	}

	.list {
		padding: 0 20upx;

		.item {
			margin-bottom: 20upx;
			box-shadow: 0px 3px 25px 2px rgba(159, 159, 159, 0.1);
			border-radius: 10upx;
			padding: 0 20upx;
			background-color: #fff;

			.item-part {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.item-head {
				border-bottom: 1upx solid #E5E5E5;
				height: 90upx;
			}

			.item-foot {
				height: 68upx;
			}
		}
	}
</style>
